<template>
    <div class="topic-container">
        <div class="topic-main"  v-loading="loading">
            <div class="topic-info">
                <div  v-if="!topic.join" style="font-size: 30px;font-weight: 600;text-align: center;padding-top: 20px;padding-bottom: 20px;">{{ topic.name }}</div>
                <div  v-if="!topic.join" style="text-align: center;padding-bottom: 20px;font-size: 20px;font-weight: 400;" >总分{{ topic.totalScore }}</div>
            </div>
            <div class="topic-item-main" v-if="topic">
                <div class="topic-item-info"  v-for="(topicItem,index) in topic.topicItemList" :key="index">
                    <div class="topic-item-title">
                       {{ index+1 }}. {{ topicItem.name }}({{ topicItem.award }}分)
                    </div>
                    <div class="topic-item-option" v-if="topic.topicItemList">
                            <div>
                                <el-radio v-model="topicItem.selectOptionId" @input="addUserSelect(option)" :label="option.id" v-for="(option,index) in topicItem.optionList" :key="index">{{ `${option.name}:${option.value}` }}</el-radio>
                            </div>
                    </div>
                </div>

            </div>
            <div class="topic-option-btn">
                <i-button :level="'info'" @click.native="submitUserSelectOption" v-if="!topic.join">提交能测卷</i-button>
                <i-button style="margin-left: 20px;" @click.native="$router.push('/center/test-topic')">返回</i-button>

            </div>
        </div>

    </div>
</template>

<script>

import {post,get} from '@/utils/api.js'
import IButton from '@/components/plugs/i-button/IButton.vue';
    export default{
        data(){
            return{
                topic:{
                    join:true
                },
                loading:true
            }
        },
        methods:{

            getTopicDetails(){
                let id = this.$route.params.id;
                const promise = get({
                    url:'/base-topic/front/test-topic/details',
                    params:{id}
                });

                promise.then(res=>{
                    if(res){
                        if(res.code === 200){
                            this.topic = res.data;
                           
                            
                        }else{
                            this.$message.error(res.message);
                        }
                        this.loading = false;

                    }
                })

            },
            addUserSelect(option){
            //    let option = {optionId}
            console.log('我被选中了',option)                  
               
            },
            submitUserSelectOption(){
               
               this.loading = true;

               if(this.topic.topicItemList==null||this.topic.topicItemList.length === 0){

                    this.$message.warning('没有能测题目需要提交~');
                    this.loading = false;
                    return;
               }

               let userSelectOptions = [];

               for(let i=0;i<this.topic.topicItemList.length;i++){

                    let entity = {topicItemId:this.topic.topicItemList[i].id,selectOptionId:this.topic.topicItemList[i].selectOptionId};
                    // console.log('entity',entity);
                    userSelectOptions.push(entity)
               }

               const promise = post({
                url:'/base-topic/front/test-topic/submit',
                data:{id:this.topic.id,userSelectOptions}
               });

               promise.then(res=>{
                    if(res&&res.code === 200){
                        this.$message.success(res.message);
                        // this.loading = false;
                        this.getTopicResult();
                    }
               })
            },
            getTopicResult(){
                const promise = get({
                    url:'/base-topic/front/test-topic/user/result',
                    params:{topicId:this.topic.id}
                });

                promise.then(res=>{
                    if(res&&res.code === 200){
                        this.loading = false;
                        this.$alert(`恭喜你，再本次能测中的成绩是:${res.data.result}`,'你的能测成绩',{
                            confirmButtonText:'确定',
                            callback:action =>{
                                this.$router.push('/center/test-topic');
                            }
                        })
                    }
                })

                
            }

        },
        mounted(){
            this.getTopicDetails();
        },
        components:{
                IButton

        }
    }
</script>

<style scoped>

.topic-container{
    background-color: #fff;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.topic-main{
    margin-top: 40px;
    width: 1000px;
    
}

.topic-item-main{
    border: 1px solid #dcdfe6;
   
}
.topic-item-info:nth-child(odd){
    background-color: #fff;
    animation: fadeInLeft 1s;
}

.topic-item-info:nth-child(even){
    background-color: #fff;
    /* animation: fadeInRight 1s; */
    animation: fadeInLeft 1s;
}

.topic-item-title{
    padding: 20px;
    font-size: 20px;
    font-weight: 700;

}
.topic-item-option{
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}
.topic-option-btn{
    height: 200px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>